<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>zhangqinlin个人博客</title>
		<link rel="stylesheet" type="text/css" href="./css/自定义栅格.css" />
		<link rel="stylesheet" type="text/css" href="./css/index.css" />
		<link rel="stylesheet" type="text/css" href="./css/public.css" />
		<link rel="stylesheet" type="text/css" href="./css/iconfont.css">
		<link rel="shortcut icon" href="./img/qinlin.jpg">

	</head>

	<body>

		<div id="snowFlow"></div>
		<div id="myHome">
			<!--头部开始-->
			<div id="header" class="clearfix">
				<div class="header_fix">
					<div class="container ">
						<div class="row clearfix">
							<a href="index.html" class="col-xs-6 logo"><i></i></a>
							<ul>
								<a href="index.html" class="col-xs-6 ">
									<li>
										<i class="iconfont icon-mu"></i>
										<span>首页</span>
									</li>
								</a>
								<a href="aboutMe.html" class="col-xs-6 ">
									<li class="aboutMe">
										<i class="iconfont icon-wo"></i>
										<span>关于我</span>
									</li>
								</a>
								<a href="music.html" class="col-xs-6 ">
									<li>
										<i class="iconfont icon-yinle"></i> 音乐
									</li>
								</a>
								<a href="photos.html" class="col-xs-6 ">
									<li>
										<i class="iconfont icon-zhaopian"></i>
										<span>相册</span>
									</li>
								</a>
								<a href="diary.html" class="col-xs-6 ">
									<li>
										<i class="iconfont icon-diary"></i>
										<span>日记</span>
									</li>
								</a>
								<a href="travel.html" class="col-xs-6 ">
									<li>
										<i class="iconfont icon-lvhang2"></i> 旅行
									</li>
								</a>

								<a href="contactME.html" class="col-xs-6 ">
									<li>
										<i class="iconfont icon-dianhua"></i>
										<span>联系我</span>
									</li>
								</a>
								<a href="webProduct.html" class="col-xs-6 ">
									<li>
										<i class="iconfont icon-lvhang1"></i>
										<span>web作品展示</span>
									</li>
								</a>
								<a href="webProduct.html" class="col-xs-6 ">
									<li>
										<i class="iconfont icon-lvhang1"></i>
										<span>登录</span>
									</li>
								</a>
								<a href="webProduct.html" class="col-xs-6 ">
									<li>
										<i class="iconfont icon-lvhang1"></i>
										<span>注册</span>
									</li>
								</a>
							</ul>
						</div>

					</div>
				</div>
			</div>
			<!--头部结束-->

			<div id="Flash">
				<!--轮播图部分-->
				<div class="container clearfix">
					<div class="row clearfix">
						<div class="col-lg-2 col-md-3 col-xs-12 col-sm-4 F_left ">
							<div class="photo">
								<img src="./img/qinlin.jpg" />
							</div>
							<ul class="introduce">
								<li>
									<i class="iconfont icon-wo"></i>
									<span>张琴琳</span>
								</li>
								<li>
									<i class="iconfont icon-xiangmu"></i>
									<span>1992/07</span>
								</li>
								<li>
									<i class="iconfont icon-didian"></i>
									<span>湖南省长沙市</span>
								</li>
								<li>
									<i class="iconfont icon-dianhua3"></i>
									<span>电话：17377876272</span>
								</li>
								<li>
									<i class="iconfont icon-qq"></i>
									<span>1639415708</span>
								</li>
								<li>
									<i class="iconfont icon-wo"></i>
									<span>1639415708@qq.com</span>
								</li>
								<li>
									<i class="iconfont icon-weixin"></i>
									<span>qinlin992</span>
								</li>
							</ul>
						</div>
						<div class="col-lg-10 col-md-9 col-xs-12 col-sm-8 Flash_list ">
							<a href="#" class="lbt"><img src="./img/1.jpg" />
								<div class="flash_cover">
									<div class="welcome">
										<div class="introduce">
											<span style="font-size: 2 0px;">欢迎来到张琴琳的个人主页</span>
											<div><em>My name is Zhangqinlin,I come from xiangxi hunan province,and  I graduated from Beijing Wuzi University...</em> </div>
										</div>
										<a href="aboutMe.html" class="more">了解我更多>></a>
									</div>
								</div>
								<div class="slider_btn">
									<div class="btn">
									</div>
									<div class="btn">
									</div>
									<div class="btn">
									</div>
									<div class="btn">
									</div>
									<div class="btn">
									</div>
									<div class="btn">
									</div>
									<div class="btn">
									</div>
									<div class="btn">
									</div>
								</div>
								<div class="turn_left turn"></div>
								<div class="turn_right turn"></div>
							</a>
						</div>
					</div>
				</div>
				<!--轮播图结束-->
			</div>

			<!--内容概览部分-->
			<div class="desc">
				<div class="container clearfix">
					<!--日记-消逝在时光里的记忆-->
					<div class="diary clearfix">
						<div class="title ">
							<i class="iconfont icon-xiangmu"></i>
							<span>那些消逝在时光里的记忆</span>
						</div>
						<div class='row clearfix'>
							<div class="col-lg-3 col-md-3 col-xs-12 col-sm-6">
								<div class="desc-item clearfix">
									<h3><img src="./img/beijing.jpg"/><span>北漂的生活</span></h3>
									<p>从北京回来已经有些时日，可最近总是梦见又回北京。在北京生活了6年，整个青春岁月都是在那边度过的，自从2011年的秋天去了北京上大学，直至17年年底才回到老家,大学毕业后，对于自己待了4年的城市，竟有些留恋，也必将看好北京的互联网环境，我成为了千千万万北漂的一员.....</p>
									<date class='date'>2017-12-15</date>
									<a href="#" class="readMore">阅读更多...</a>
								</div>
							</div>
							<div class="col-lg-3 col-md-3 col-xs-12 col-sm-6">
								<div class="desc-item clearfix">
									<h3><img src="./img/hua.png"  />学习web前端的初衷</h3>
									<p>也许很多人不理解，我为什么辞掉了工资马上上万的工作，而选择从头开始学习web前端网页开发技术，况且年龄也不小了，现在转行，真的太需要勇气，我想我也是鼓起了我最大的勇气，告别了北漂，回到了长沙这样的二线城市学习前端。的确，北京的互联网环境要比长沙好太多.....</p>
									<date class='date'>2017-12-15</date>
									<a href="#" class="readMore">阅读更多...</a>
								</div>
							</div>
							<div class="col-lg-3 col-md-3 col-xs-12 col-sm-6">
								<div class="desc-item clearfix">
									<h3><img src="./img/love1.jpg"  /><span>遇见你是我此生最幸运的事</span></h3>
									<p>09年认识你的时候，我们正值18岁的少年，懵懂的我们面临高考，曾经我们约定要一起去考北京的学校，可是事与愿违，我们还是分开了，然后擦肩而过，一晃眼就是七八年过去了，我也倦怠了北漂，幸运的是，你仍在这里，很多东西都还没有变，那么余生，请多指教.....</p>

									<date class='date'>2017-12-15</date>
									<a href="#" class="readMore">阅读更多...</a>
								</div>
							</div>
							<div class="col-lg-3 col-md-3 col-xs-12 col-sm-6">
								<div class="desc-item clearfix">
									<h3><img src="./img/web.jpg"  />web学习技巧总结</h3>
									<p>1、元素垂直居中的方法.....</p>
									<p>2、元素垂直居中的方法.....</p>
									<p>3、元素垂直居中的方法.....</p>
									<p>4、元素垂直居中的方法.....</p>
									<p>5、元素垂直居中的方法.....</p>
									<date class='date'>2017-12-15</date>
									<a href="#" class="readMore">阅读更多...</a>
								</div>
							</div>
						</div>
					</div>
					<!--日记-消逝在时光里的记忆结束-->

					<!--旅行相册-->
					<div class="xiangce clearfix">
						<div class="title ">
							<i class="iconfont icon-liebiao" style="color: red;margin-left: 5px;"></i>
							<span>那些年走过的路</span>
						</div>
						<div class='row clearfix'>
							<div class="col-lg-2 col-md-3 col-xs-6 col-sm-4">
								<div class="desc-item clearfix">
									<img src="./img/11.jpg" />
									<div>
										<date class='date'>故宫游 <span class="date">2011</span></date>
										<span class="readMore">查看更多</span>
									</div>
								</div>
							</div>
							<div class="col-lg-2 col-md-3 col-xs-6 col-sm-4">
								<div class="desc-item clearfix">
									<img src="./img/14.jpg" />
									<div>
										<date class='date'>洁宝宝 <span class="date">2011</span></date>
										<span class="readMore">查看更多</span>
									</div>
								</div>
							</div>
							<div class="col-lg-2 col-md-3 col-xs-6 col-sm-4">
								<div class="desc-item clearfix">
									<img src="./img/15.jpg" />
									<div>
										<date class='date'>自拍 <span class="date">2011</span></date>
										<span class="readMore">查看更多</span>
									</div>
								</div>
							</div>
							<div class="col-lg-2 col-md-3 col-xs-6 col-sm-4">
								<div class="desc-item clearfix">
									<img src="./img/4.jpg" />
									<div>
										<date class='date'>岳麓山 <span class="date">2017</span></date>
										<span class="readMore">查看更多</span>
									</div>
								</div>
							</div>
							<div class="col-lg-2 col-md-3 col-xs-6 col-sm-4">
								<div class="desc-item clearfix">
									<img src="./img/5.jpg" />
									<div>
										<date class='date'>岳麓山 <span class="date">2017</span></date>
										<span class="readMore">查看更多</span>
									</div>
								</div>
							</div>
							<div class="col-lg-2 col-md-3 col-xs-6 col-sm-4">
								<div class="desc-item clearfix">
									<img src="./img/6.jpg" />
									<div>
										<date class='date'>巴厘岛 <span class="date">2017</span></date>
										<span class="readMore">查看更多</span>
									</div>
								</div>
							</div>

						</div>
					</div>
					<!--旅行相册结束-->

					<!--web作品展示-->
					<div class="webProuct clearfix">
						<div class="title ">
							<i class="iconfont icon-lvxing1"></i>
							<span>对web前端的热爱</span>
							<div id="box">
								<div class="front"></div>
								<div class="back"></div>
								<div class="left"></div>
								<div class="right"></div>
								<div class="top"></div>
								<div class="end"></div>
							</div>
						</div>
						<div class='row clearfix'>
							<div class="col-lg-3 col-md-6 col-xs-6 col-sm-6">
								<div class="desc-item  ">
									<img src="./img/xiaomi.png"/ >
									<a href="#" class="readMore">详细信息...</a>
									<div class="desc">
										<h3>小米商城项目</h3>
										<span class="zan_num" >1人</span>
										已点赞 
										<div class="surport">
											<i class="zan"></i>赞
										</div>
									</div>
								</div>
							</div>
							<div class="col-lg-3 col-md-6 col-xs-6 col-sm-6">
								<div class="desc-item  ">
									<img src="./img/canvas.jpg"/ >
									<a href="#" class="readMore">详细信息...</a>
									<div class="desc">
										<h3>canvas画图小工具</h3>
										<span class="zan_num" >1人</span>
										已点赞 
										<div class="surport">
											<i class="zan"></i>赞
										</div>
									</div>
								</div>
							</div>
							<div class="col-lg-3 col-md-6 col-xs-6 col-sm-6">
								<div class="desc-item  ">
									<img src="./img/meituan.png"/ >
									<a href="#" class="readMore">详细信息...</a>
									<div class="desc">
										<h3>美团整站开发</h3>
										<span class="zan_num" >1人</span>
										已点赞 
										<div class="surport">
											<i class="zan"></i>赞
										</div>
									</div>
								</div>
							</div>
							<div class="col-lg-3 col-md-6 col-xs-6 col-sm-6">
								<div class="desc-item  ">
									<img src="./img/taobao.png"/ >
									<a href="#" class="readMore">详细信息...</a>
									<div class="desc">
										<h3>淘宝移动端首页开发</h3>
										<span class="zan_num" >1人</span>
										已点赞 
										<div class="surport">
											<i class="zan"></i>赞
										</div>
									</div>
								</div>
							</div>
						</div>

					</div>
					<!--web作品展示结束-->
				</div>
			</div>

			<!--底部部分-->
			<div id="footer">
				<div class='container'>
					<div class='footer_link'>web前端学习常用链接：
						<a href="https://github.com/">github代码托管</a>
						<a href="https://ke.qq.com/">腾讯课堂</a>
						<a href="https://gitee.com/">码云</a>
						<a href="http://www.w3school.com.cn/">W3C school</a>
						<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript">javascript MDN</a>
						<a href="http://www.runoob.com/">菜鸟教程</a>
						<a href="https://ke.qq.com/">自强学堂</a>
					</div>
					<p>本网站作者：张琴琳，所有的内容由本人原创，侵权必究。</p>
				</div>
			</div><br />
			<!--底部部分结束-->

			<!--回到顶部按钮-->
			<div class="toTOP">
				<div class="f_top">

				</div>
			</div>
			<!--回到顶部按钮结束-->
		</div>
        <script src="./js/wo.js" type="text/javascript" charset="utf-8"></script>

	</body>

</html>